<template>
	<view class="content">
		<view class="bgColor">
			<image src="/static/home/dktjBg.png" mode=""></image>
		</view>
		<cusHeaderVue titleContent="打卡统计" :showBack="true"></cusHeaderVue>
		<view class="contBox" :style="{paddingTop: `calc(${scrollerHeight} + 130rpx)`}">
			<view class="contTop">
				<view class="contTit">
					共计打卡<text>{{totalCount}}</text>次
				</view>
				<view class="contTime" @click="dateMode ? selectDate() : selectMonth()">
					{{ dateMode ? selectedDate : selectedMonth }}
					<u-icon name="arrow-down-fill" color="#F79F31" size="10"></u-icon>
				</view>
				
			</view>
		</view>
		<view class="contBoxBig">
			<scroll-view scroll-y="true" :style="{height:swiperHeight}">
				<view class="listBox">
					<!-- 外层用户列表 -->
					<view class="listBoxLi" v-for="(item,index) in userCheckArray" :key="index">
						<!-- 点击标题栏切换折叠状态 -->
						<view class="listBoxLiTop" @click="toggleExpand(index)">
							<view class="listBoxLiTopLeft">
								{{item.nickname}}
								<view class="listBoxLiTopIcon">
									<view style="margin-left: 34.62rpx;flex: 1;text-align: center;">
										{{item.dxShopCheckDOS.length}}次
									</view>
								</view>
							</view>
							<!-- 动态切换箭头方向 -->
							<u-icon 
								:name="expandedIndex === index ? 'arrow-up' : 'arrow-down'" 
								color="#848b99" 
								size="15"
							></u-icon>
						</view>
						
						<!-- 子列表：根据展开状态显示/隐藏 -->
						<view class="subListContainer" v-if="expandedIndex === index">
							<view class="listLi" v-for="(obj,objIndex) in item.dxShopCheckDOS" :key="objIndex">
								<view class="listLeft">
									<view class="listName">
										{{obj.name}}
									</view>
									<view class="listTime">
										{{formatDateTime(obj.createTime)}}打卡
									</view>
								</view>
								<view class="listRightA" v-if="obj.type ==0">
									离店
								</view>
								<view class="listRight" v-if="obj.type ==1">
									到店
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<MonthPickerPopup :isDateMode="dateMode" ref="monthPickerRef" @confirm="onMonthConfirm" @cancel="onMonthCancel" />
	</view>
</template>

<script setup>
	import cusHeaderVue from '@/components/cus-header.vue';
	import { formatDateTime } from '@/utils/date.js';
	import { GETTodayCheckDetail } from '@/api/interface.js';
	import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import MonthPickerPopup from '@/components/MonthPickerPopup.vue';

	// 状态管理
	const scrollerHeight = ref('');
	const swiperHeight = ref('');
	const monthPickerRef = ref(null);
	const selectedMonth = ref('');
	const userCheckArray = ref([]);  // 修正为数组类型
	const totalCount = ref(0);
	const expandedIndex = ref(-1);  // 控制折叠状态：-1表示全部折叠
	const dateMode = ref(false);     // 新增：模式标记（true=年月日）
	const selectedDate = ref('');    // 新增：年月日选择的显示字符串

	onLoad((options) => {
		dateMode.value = options && options.mode === 'day';
		console.log(dateMode.value,'123124124124')
		getBarHeight();
		if (dateMode.value) {
			initDefaultDate();
		} else {
			initDefaultMonth();
		}
	})

	// 获取状态栏高度及计算滚动区域
	const getBarHeight = () => {
		uni.getSystemInfo({
			success: function(resu) {
				scrollerHeight.value = resu.statusBarHeight + 'px';
				const query = uni.createSelectorQuery();
				query.select('.contBoxBig').boundingClientRect();
				query.exec(res => {
					if (res && res[0]) {
						swiperHeight.value = resu.windowHeight 
							- res[0].top 
							- resu.safeAreaInsets.bottom 
							- resu.statusBarHeight 
							- 70 + 'px';
					}
				});
			}
		});
	}

	// 切换折叠/展开状态
	const toggleExpand = (index) => {
		// 如果点击当前展开项则折叠，否则展开点击项
		expandedIndex.value = expandedIndex.value === index ? -1 : index;
	};

	// 选择确认（支持月份或日期）
	const onMonthConfirm = (val) => {
		if (dateMode.value) {
			// 'YYYY年MM月DD日'
			selectedDate.value = val;
		} else {
			// 'YYYY年MM月'
			selectedMonth.value = val;
		}
		getList();
	};

	const initDefaultDate = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const day = now.getDate();
		selectedDate.value = `${year}年${month.toString().padStart(2, '0')}月${day.toString().padStart(2, '0')}日`;  // 补全两位数月份
		getList();
	};

	// 初始化默认月份
	const initDefaultMonth = () => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		selectedMonth.value = `${year}年${month.toString().padStart(2, '0')}月`;  // 补全两位数月份
		getList();
	};

	// 打开年月选择器
	const selectMonth = () => {
		monthPickerRef.value.open();
	};

	// ===== 年月日模式（统一使用 MonthPickerPopup）=====
	const selectDate = () => {
		monthPickerRef.value.open();
	};
	const onMonthCancel = () => {};

	// 获取打卡列表数据
	const getList = () => {
		// 根据模式构造查询串
		let reqStr = '';
		if (dateMode.value) {
			// YYYY-MM-DD
			reqStr = (selectedDate.value || '').replace('年', '-').replace('月', '-').replace('日', '');
		} else {
			// YYYY-MM
			reqStr = (selectedMonth.value || '').replace('年', '-').replace('月', '');
		}
		GETTodayCheckDetail({
			todayStr: reqStr
		}).then(res => {
			userCheckArray.value = res.data.adminUserDOS || [];  // 确保为数组
			totalCount.value = res.data.totalCount || 0;
			expandedIndex.value = -1;  // 重新加载数据后默认折叠
		}).catch(err => {
			console.error('获取打卡数据失败:', err);
			userCheckArray.value = [];
			totalCount.value = 0;
		});
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.bgColor {
		width: 750rpx;
		height: 500rpx;
		position: absolute;
		z-index: -1;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.contBox {
		width: 100%;
		padding: 22rpx;
		box-sizing: border-box;

		.contTop {
			padding: 0 24rpx;
			box-sizing: border-box;

			.contTit {
				font-weight: 500;
				font-size: 34.92rpx;
				color: #1C2027;

				text {
					font-size: 63.39rpx;
					font-weight: 400;
					color: #F79F31;
				}
			}

			.contTime {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 320rpx;
				height: 56.41rpx;
				border-radius: 10.26rpx;
				background: #ffffff;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #222222;
				font-weight: 400;
				font-size: 29.49rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				cursor: pointer;
			}
		}
	}

	.contBoxBig {
		padding: 10rpx 22rpx;
		box-sizing: border-box;

		.listBox {
			.listBoxLi {
				width: 100%;
				border-radius: 12.82rpx;
				background: #ffffff;
				padding: 35rpx 27rpx;
				box-sizing: border-box;
				margin-bottom: 19rpx;

				.listBoxLiTop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 23rpx;
					cursor: pointer;  // 提示可点击

					.listBoxLiTopLeft {
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 33.33rpx;
						color: #1C2027;

						.listBoxLiTopIcon {
							width: 94.23rpx;
							height: 32.05rpx;
							color: #f79f31;
							font-weight: 400;
							font-size: 24.36rpx;
							background: url('/static/home/dkcs.png') no-repeat center;
							background-size: 100% 100%;
							margin-left: 12rpx;
						}
					}
				}

				// 子列表容器（添加过渡动画）
				.subListContainer {
					overflow: hidden;
					transition: all 0.3s ease;
				}
			}

			.listLi {
				display: flex;
				align-items: center;
				border-radius: 12.82rpx;
				background: #f6f8fa;
				margin-bottom: 13rpx;
				padding: 30rpx 24rpx;
				box-sizing: border-box;

				.listLeft {
					flex: 1;

					.listName {
						font-size: 24.36rpx;
						font-weight: 400;
						color: #222222;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 476.92rpx;
					}

					.listTime {
						color: #7f8494;
						font-weight: 400;
						font-size: 24.36rpx;
						margin-top: 14rpx;
					}
				}

				.listRight {
					width: 80.77rpx;
					height: 35.9rpx;
					border-radius: 6.41rpx;
					background: #ffffff;
					font-size: 24.36rpx;
					font-weight: 400;
					color: #02A360;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #02A360;
				}

				.listRightA {
					width: 80.77rpx;
					height: 35.9rpx;
					border-radius: 6.41rpx;
					background: #ffffff;
					font-size: 24.36rpx;
					font-weight: 400;
					color: #FA871E;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid #FA871E;
				}
			}
		}
	}
</style>